<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.Statement" %>
<%@ page import="java.sql.ResultSet" %><%--
  Created by IntelliJ IDEA.
  User: CHEN
  Date: 2025/9/16
  Time: 10:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.7/css/bootstrap.min.css">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/commodity.css"/>
    <style>
        /* 导航栏容器 */
        .navbar {
            display: flex;
            justify-content: space-evenly;
            overflow: hidden;
            background-color: #333333;
        }

        /* 导航栏链接 */
        .navbar a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }


        /* 修改导航栏链接颜色 */
        .navbar a:hover
    </style>
</head>

<body>


<%!
    String url = "jdbc:mysql://localhost:3306/cosplay_community?serverTimezone=UTC";
    String db_name = "root";
    String db_pass = "13574178580";
    String sql = "select * from skill_service";
%>

<div class="navbar">
    <a href="index.jsp">首页</a>
    <a href="page1.jsp">毛娘预约</a>
    <a href="page2.jsp">妆娘预约</a>
    <a href="page3.jsp">二手周边交易</a>
    <a href="community.html">社区</a>
    <a href="Post.jsp">信息发布</a>
    <a href="登录.jsp">登录注册</a>
</div>
<div class="container text-center">
    <br>
    <div class="row">
        <%
            try {
                Class.forName("com.mysql.cj.jdbc.Driver");
                Connection conn = DriverManager.getConnection(url, db_name, db_pass);
                Statement stmt = conn.createStatement();
                ResultSet rs = stmt.executeQuery(sql);
                while (rs.next()) {
        %>
        <div class="col">
<br>
            <div class="card" style="width: 18rem;">
                <img src="<%="/img/"+rs.getString("description")%>" alt="">
                <div class="card-body">
                    <h5 class="card-title"><%=rs.getString(3)%>
                    </h5>
                    <p class="card-text"><%=rs.getString(5)%>元</p>
                    <input class="buybutton" type="button" value="查看"/>
                </div>
            </div>
        </div>
        <%
                }
                stmt.close();
                conn.close();
            } catch (Exception e) {
                e.printStackTrace();

            }
        %>
    </div>
</div>


</body>

</html>
